<%--
  Created by IntelliJ IDEA.
  User: soft01
  Date: 21-10-14
  Time: 下午5:40
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>课程管理</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/back-index.css" />
    <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-mypaginator.js"></script>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            width: 100%;
            text-align: center;
        }
        /*.file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }*/
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .file:focus {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .img {
            /* max-width: 100px; */
            width: 100px;
            /* max-height: 120px; */
        }
        tr td {
            line-height: 120px !important;
        }

    </style>
    <script type="text/javascript">
        let courseNamebiaozhi=-1;
        let courseInfobiaozhi=-1;
        let courseAuthorbiaozhi=-1;
        let courseTuijianbiaozhi=-1;
        let courseTypebiaozhi=-1;
        let coursefilebiaozhi=1;
        $(function(){
            // 课程管理 修改课程
            $(".doCourseModify").on("click", function() {
                $("#course-id-input").show();
                $(".file").html("选择文件");
                $("#cover-image").val(undefined);
                $("#queding").attr("disabled",false);
                $("#url").attr("url","${pageContext.request.contextPath}/course/modifyCourseById.do");
                $("#nameMrg").text(" ");
                $("#infoMrg").text(" ");
                $("#authorMrg").text(" ");
                $("#rMrg").text(" ");
                $("#typeMrg").text(" ");
                courseNamebiaozhi=1;
                courseInfobiaozhi=1;
                courseAuthorbiaozhi=1;
                courseTuijianbiaozhi=1;
                courseTypebiaozhi=1;
                coursefilebiaozhi=1;
                $(".modal-title").html("修改课程");
                $("#Course").modal("show");
            });
            $(".curse-btn").on("click", function() {
                $("#Course").modal("hide");
            });
            // 课程管理 添加课程
            $("#doCourse").on("click", function() {
                $("#course-id-input").hide();
                $(".file").html("选择文件");
                $("#cover-image").val(undefined);
                $(".modal-title").html("添加课程");
                courseNamebiaozhi=-1;
                courseInfobiaozhi=-1;
                courseAuthorbiaozhi=-1;
                courseTuijianbiaozhi=-1;
                courseTypebiaozhi=-1;
                coursefilebiaozhi=-1;
                $("#course-id").val("");//清空id栏的数值，少了这一步图片判断会出错
                $("#course-name").val("");
                $("#course-info").val("");
                $("#course-author").val("");
                $("#recommendation-grade").val("");
                $("#course-type-id").val("");
                $("#nameMrg").text(" ");
                $("#infoMrg").text(" ");
                $("#authorMrg").text(" ");
                $("#rMrg").text(" ");
                $("#typeMrg").text(" ");
                $("#recommendation-grade").val("-1");
                $("#course-type-id").val("-1");
                $("#queding").attr("disabled",true);
                $("#url").attr("url","${pageContext.request.contextPath}/course/addCourse.do");
                $("#Course").modal("show");
            });

            //课程章节显示
            $(".course-detail").on("click", function() {
                $('#frame-id', window.parent.document).attr('src', 'back_courseReourceSet.html');
            });

            // 显示隐藏查询列表
            $('#show-course-search').click(function() {
                $('#show-course-search').hide();
                $('#upp-course-search').show();
                $('.show-course-search').slideDown(500);
            });
            $('#upp-course-search').click(function() {
                $('#show-course-search').show();
                $('#upp-course-search').hide();
                $('.show-course-search').slideUp(500);
            });
            $("#course-name").keyup(function () {//检查课程名称是否合格
                let courseName=$(this).val();
                let courseId=$("#course-id").val();
                console.log(courseId);
                console.log(courseName)
                let courseType=$("#course-type-id").val();
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/course/jianchaCourseName.do",
                    data:{"courseName":courseName,
                          "courseType":courseType,
                          "courseId":courseId},
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            $("#nameMrg").text(" ");
                            courseNamebiaozhi=1
                            if(
                                $("#typeMrg").text()=="同课程类型下存在同名课程"
                            ){
                                $("#typeMrg").text(" ");
                                courseTypebiaozhi=1;
                            }
                        }else {
                           $("#nameMrg").text(result.message);
                           courseNamebiaozhi=-1
                           $("#queding").attr("disabled",true);
                        }
                    }
                })
            })
            $("#course-info").keyup(function () {//检查课程简介
                let courseInfo=$(this).val()
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/course/jianchaCourseInfo.do",
                    data:{"courseInfo":courseInfo},
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            courseInfobiaozhi=1
                            $("#infoMrg").text(" ");
                        }else {
                            $("#infoMrg").text(result.message);
                            courseInfobiaozhi=-1
                            $("#queding").attr("disabled",true);
                        }
                    }
                })
            })
            $("#course-author").keyup(function () {//检查课程作者
                let courseauthor=$(this).val()
                console.log(courseauthor)
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/course/jianchaCourseAuthor.do",
                    data:{"courseAuthor":courseauthor},
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            courseAuthorbiaozhi=1
                            $("#authorMrg").text(" ");
                        }else {
                            $("#authorMrg").text(result.message);
                            courseAuthorbiaozhi=-1
                            $("#queding").attr("disabled",true);
                        }
                    }
                })
            })
            $("#cover-image").change(function () {//检查封面图片
                let file=$(this).val();
                console.log(file)
                let formData = new FormData($("#addOrMoidfyForm")[0]);
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/course/jianchaCourseFile.do",
                    data:formData,
                    dataType:"json",
                    processData:false,
                    contentType:false,
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            coursefilebiaozhi=1
                            $("#fileMrg").text(" ");
                        }else {
                            $("#fileMrg").text(result.message);
                            coursefilebiaozhi=-1
                            $("#queding").attr("disabled",true);
                        }
                    }
                })
            })
            $("#recommendation-grade").change(function () {//检查课程推荐程度
                let courseTuijian=$(this).val();
                console.log(courseTuijian);
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/course/jianchaCourseTuijian.do",
                    data:{"courseTuijian":courseTuijian},
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            courseTuijianbiaozhi=1
                            $("#rMrg").text(" ");
                        }else {
                            $("#rMrg").text(result.message);
                            courseTuijianbiaozhi=-1
                            $("#queding").attr("disabled",true);
                        }
                    }
                })
            })
            $("#course-type-id").change(function () {//检查课程类型
                let courseType=$(this).val();
                let courseName=$("#course-name").val();
                let courseId=$("#course-id").val();
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/course/jianchaCourseType.do",
                    data:{"courseType":courseType,
                          "courseName":courseName,
                          "courseId":courseId},
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            courseTypebiaozhi=1
                            $("#typeMrg").text(" ");
                            if(
                                $("#nameMrg").text()=="同课程类型下存在同名课程"
                            ){
                                $("#nameMrg").text(" ");
                                courseNamebiaozhi=1;
                            }
                        }else {

                            $("#typeMrg").text(result.message);
                            courseTypebiaozhi=-1
                            $("#queding").attr("disabled",true);
                        }
                    }
                })
            })
            $("#Course").mousemove(function () {//数据不合格时无法提交
              if (courseNamebiaozhi==1
              && courseInfobiaozhi==1
              && courseTuijianbiaozhi==1
              && courseAuthorbiaozhi==1
              &&(coursefilebiaozhi==1)
              && courseTypebiaozhi==1
              && $("#course-type-id").val()!=-1
              && $("#recommendation-grade").val()!=-1){
                  $("#queding").attr("disabled",false);
              }
            })

            $("#queding").click(function () {//添加或者修改课程
                let url=$("#url").attr("url");
                console.log("修改");
                console.log(url)
                let formData = new FormData($("#addOrMoidfyForm")[0]);
                // $("#queding").attr("disabled",false);
                $.ajax({
                    type:"post",
                    url:url,
                    data:formData,
                    dataType:"json",
                    processData:false,
                    contentType:false,
                    success:function (result) {
                        console.log(result);
                        if(result.responseCode=="2001"){
                            location.href="${pageContext.request.contextPath}/course/sreachCourseByForm2.do";
                        }else{
                            $("#Mrg").text(result.message);
                        }
                    }
                })
            })
            $("input[name=xiugai]").click(function () {//修改前的查询
                let id = $(this).attr("courseId");
                console.log(id);
                $.ajax({
                    type:"get",
                    url:"${pageContext.request.contextPath}/course/findCourseById.do?id="+id,
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            console.log(result)
                            $("#course-id").val(result.returnObject.id);
                            $("#course-name").val(result.returnObject.courseName);
                            $("#course-info").val(result.returnObject.courseInfo);
                            $("#course-author").val(result.returnObject.author);
                            $("#recommendation-grade").val(result.returnObject.recommendationGrade);
                            $("#course-type-id").val(result.returnObject.courseTypeId);
                        }else{
                            $("#Mrg").text(result.message);
                        }
                    }
                })

            })
            $("input[name=yong]").click(function () {//禁用和启用
                let id=$(this).attr("courseId");
                let status=$(this).attr("status");
                console.log(id)
                $.ajax({
                    type:"get",
                    url:"${pageContext.request.contextPath}/course/yongCourseById.do?id="+id+"&status="+status,
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            $("#Mrg").text("");
                            location.href="${pageContext.request.contextPath}/course/sreachCourseByForm2.do?pageNo="+
                            "${sessionScope.courseList.pageNum}";
                        }else {
                            $("#Mrg").text(result.message);
                        }
                    }
                })

            })
            $("#doSearch").click(function () {//条件查询
                $("#sreachForm").submit();//表单提交
            })
            $("input[name='Chapter']").click(function () {//查询课程章节
                let courseId=$(this).attr("courseId");
                console.log(courseId);
                location.href="${pageContext.request.contextPath}/chapter/findAllChapterByCourseId.do?courseId="+courseId;
            })

            //按钮的超链接设置函数
            myoptions.pageUrl = function(type, page, current) {
                      return "${pageContext.request.contextPath }/course/sreachCourseByForm2.do?pageNo="+ page;
                  };
            // 分页回调函数,点击按钮事件
            myoptions.onPageClicked = function(event, originalEvent, type, page) {
                //ajax回调接收数据成功时再重新初始化分页按钮
                console.log("pageNo=", page);
            };
            //分页,在bootstrap-mypaginator.js中
            myPaginatorFun("myPages",
                "${sessionScope.courseList.pageNum==0?1:sessionScope.courseList.pageNum}",
                "${sessionScope.courseList.pages==0?1:sessionScope.courseList.pages}");
        });

        function imageUpload(item){
            $(item).click();
        }
        function imageChange(item){
            var file = item.files[0];//获取选中的第一个文件
            $(".file").html(file.name);
        }
    </script>

</head>

<body>
<div class="panel panel-default" id="userPic">
    <div class="panel-heading">
        <h3 class="panel-title">课程管理<span style="color: red" id="Mrg"></span></h3>
    </div>
    <div>
        <input type="button" value="添加课程" class="btn btn-primary" id="doCourse" style="margin: 5px 5px 5px 15px;" />
        <input type="button" value="查询" class="btn btn-success" id="doSearch" style="margin: 5px 5px 5px 0px;" />
        <input type="button" class="btn btn-primary" id="show-course-search" value="展开搜索" />
        <input type="button" value="收起搜索" class="btn btn-primary" id="upp-course-search" style="display: none;" />
    </div>
    <div class="panel-body">
        <div class="show-course-search" style="display: none;">
            <form class="form-horizontal" id="sreachForm" action="${pageContext.request.contextPath}/course/sreachCourseByForm.do" method="post" enctype="application/x-www-form-urlencoded">
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="author-name-search" class="col-xs-3 control-label">作者：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="author" id="author-name-search" placeholder="请输入作者" />
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="course-name-search" class="col-xs-3 control-label">课程名称：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="courseName" id="course-name-search" placeholder="请输入课程名称" />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="course-status-search" class="col-xs-3 control-label">状态：</label>
                        <div class="col-xs-8">
                            <select class="form-control" id="course-status-search" name="course-status-search" >
                                <option value="0" >全部</option>
                                <option value="1" >启用</option>
                                <option value="-1" >禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="course-type-id-search" class="col-xs-3 control-label">课程类别：</label>
                        <div class="col-xs-8">
                            <select class="form-control" id="course-type-id-search" name="course_type_id-search" >
                                <option value="-1" >全部</option>
                                <c:forEach items="${sessionScope.courseTypeList}" var="type">
                                    <option value="${type.id}" >${type.typeName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">开始日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="kaishitime" placeholder="请输入开始时间:2017-10-10" />
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">结束日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="jieshutime" placeholder="请输入结束时间:2017-10-12" />
                        </div>
                    </div>
                </div>

            </form>
        </div>

        <div class="modal fade" tabindex="-1" id="Course">
            <!-- 窗口声明 -->
            <div class="modal-dialog modal-lg">
                <!-- 内容声明 -->
                <div class="modal-content">
                    <!-- 头部、主体、脚注 -->
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">添加课程</h4>
                    </div>
                    <form id="addOrMoidfyForm" enctype="multipart/form-data"><span id="url" url=""></span>
                    <div class="modal-body text-center">
                        <div class="row text-right" id="course-id-input" style="display: none;" >
                            <label for="course-id" class="col-xs-4 control-label">课程编号：</label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" id="course-id" name="course_id" readonly="true" />
                            </div>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="course-name" class="col-xs-4 control-label">课程名称：</label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" id="course-name" name="course_name" />
                            </div>
                            <label style="color: red" id="nameMrg" class="col-xs-4 control-label"></label>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="course-info" class="col-xs-4 control-label">课程简介：</label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" id="course-info" name="course_info" />
                            </div>
                            <label style="color: red" id="infoMrg" class="col-xs-4 control-label"></label>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="course-author" class="col-xs-4 control-label">作者：</label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" id="course-author" name="author" />
                            </div>
                            <label style="color: red" id="authorMrg" class="col-xs-4 control-label"></label>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label class="col-xs-4 control-label">封面图片：</label>
                            <div class="col-xs-4">
                                <a href="javascript:imageUpload('#cover-image');" class="file" >选择文件</a>
                                <input type="file" name="cover_image" style="display: none;" onchange="imageChange(this)" id="cover-image" />
                            </div>
                            <label style="color: red" id="fileMrg" class="col-xs-4 control-label"></label>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="recommendation-grade" class="col-xs-4 control-label">推荐等级：</label>
                            <div class="col-xs-4">
                                <select class="form-control" id="recommendation-grade" name="recommendation_grade" >
                                    <option value="-1" >请选择</option>
                                    <option value="0" >普通</option>
                                    <option value="1" >推荐</option>
                                </select>
                            </div>
                            <label style="color: red" id="rMrg" class="col-xs-4 control-label"></label>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="course-type-id" class="col-xs-4 control-label">课程类别：</label>
                            <div class="col-xs-4">
                                <select class="form-control" id="course-type-id" name="course_type_id" >
                                    <option value="-1" >请选择</option>
                                    <c:forEach items="${sessionScope.courseTypeList}" var="type">
                                    <option value="${type.id}" >${type.typeName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <label style="color: red" id="typeMrg" class="col-xs-4 control-label"></label>
                        </div>
                        <br>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary curse-btn" type="button" id="queding">确定</button>
                        <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        </form>
        <span style="color:red">${sessionScope.NULL==null?"":sessionScope.NULL}</span>
        <div class="show-list">
            <table class="table table-bordered table-hover" style="text-align: center;">
                <thead>
                <tr class="text-danger">
                    <th class="text-center">编号</th>
                    <th class="text-center">课程名称</th>
                    <th class="text-center">作者</th>
                    <th class="text-center">封面图片</th>
                    <th class="text-center">点击量</th>
                    <th class="text-center">推荐等级</th>
                    <th class="text-center">课程类别</th>
                    <th class="text-center">创建时间</th>
                    <th class="text-center">状态</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody id="tb">
                <c:forEach items="${sessionScope.courseList.list}" var="course" varStatus="i">
                    <tr>
                        <td>${i.index+1}</td>
                        <td>${course.courseName}</td>
                        <td>${course.author}</td>
                        <td><image class="img" src="${pageContext.request.contextPath}${course.coverImageUrl}" alter="no image" /></td>
                        <td>${course.clickNumber}</td>
                        <td><c:choose>
                            <c:when test="${course.recommendationGrade==0}">普通</c:when>
                            <c:when test="${course.recommendationGrade==1}">推荐</c:when>
                        </c:choose></td>
                        <td>${course.courseType.typeName}</td>
                        <td><fmt:formatDate value="${course.createDate}" pattern="yyyy-MM-dd hh:mm:ss"/></td>
                        <c:choose>
                            <c:when test="${course.status==1}">
                                <td>启用</td>
                                <td class="text-center">
                                    <input type="button" class="btn btn-warning btn-sm doCourseModify" name="xiugai" courseId="${course.id}" value="修改" />
                                    <input type="button" class="btn btn-danger btn-sm" courseId="${course.id}" status="-1" name="yong" value="禁用" />
                                    <input type="button" class="btn btn-success btn-sm course-detail" name="Chapter" courseId="${course.id}" value="章节详情" />
                                </td>
                            </c:when>
                            <c:when test="${course.status==-1}">
                                <td>禁用</td>
                                <td class="text-center">
                                    <input type="button" class="btn btn-warning btn-sm doCourseModify"  name="xiugai" courseId="${course.id}" value="修改" />
                                    <input type="button" class="btn btn-success btn-sm"courseId="${course.id}" status="1" name="yong" value="启用" />
                                    <input type="button" class="btn btn-success btn-sm course-detail" name="Chapter" courseId="${course.id}" value="章节详情" />
                                </td>
                            </c:when>
                        </c:choose>
                </c:forEach>
                </tbody>
            </table>
        </div>
        <!-- 分页 -->
        <div style="text-align: center;" >
            <ul id="myPages" ></ul>
        </div>

    </div>
</div>
</body>

</html>